<template>
	<div id="echarts" class="clearfix">
		<div id="myChart1" class="clearfix"></div>
		<flexbox class='clearfix'>
			<flexbox-item class='clearfix'>
				<div class="flex">
					<x-button class='left-btn' mini type="primary" :gradients="['#19D5FD', '#009fff']" plain @click.native="startTime" style='border: 1px solid #f8f8f8;'>{{ time1 }}</x-button>
				</div>
			</flexbox-item>
			<flexbox-item class='clearfix'>
				<div class="flex">
					<x-button class='right-btn' mini type="primary" :gradients="['#19D5FD', '#009fff']" plain @click.native="endTime" style='border: 1px solid #f8f8f8;'>{{ time2 }}</x-button>
				</div>
			</flexbox-item>
		</flexbox>
		<img src="@/assets/image/echarts.png" alt="" class="echartimg" v-show="showImg" />
	</div>
</template>
<!--  血糖     echarts-->
<script>
	//  当前时间 YYYY-MM-DD
	var timestamp = (new Date()).getTime();
	var date = new Date(timestamp);
	let Y = date.getFullYear() + '-';
	let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
	let D = date.getDate();		D = D < 10 ? '0' + date.getDate() : D
	var currentDate = Y + M + D;
	
	import Api from '@/api/index.js' //  引入api文件
	// 引入基本模板
	let echarts = require('echarts/lib/echarts')
	// 引入折线图组件
	require('echarts/lib/chart/line');
	require('echarts/lib/component/toolbox'); //  echarts右上角图标
	require('echarts/lib/component/tooltip'); //  点击点显示
	require('echarts/lib/component/dataZoom');  // 可以滑动
	require("echarts/lib/component/legend");
	var option   // 在这里声明变量
	export default {
		data() {
			return {
				myCharts: '',
				option1: '',
				time1: '开始时间',
				time2: '结束时间',
				tabData: {
					startTime: '',
					endTime: '',
					customer_id: ''
				},
				showImg: false
			}
		},
		methods: {
			// 查询的方法
			queryFun(){
				let param = new URLSearchParams();
				param.append('customer_id', this.tabData.customer_id);
				param.append('startTime', this.tabData.startTime);
				param.append('endTime', this.tabData.endTime);
				this.$http({
					method: 'post',
					url: Api.GLUmonitorlist,
					data: param
				})
				.then(({data})=>{
						//  判断是否显示图片
						if(data.data.length > 0) {
							this.showImg = false;
						} else {
							this.showImg = true;
						}
						var dataArr = data.data;
						//  将X轴日期便利出来 加入新的数组
						var xData = [];
						for(var i = 0; i < dataArr.length; i++) {
							xData.unshift(dataArr[i].testTime)   //.substr(5, 5)
						}
						//  类别一   空腹血糖
						var gluBlood = [];
						for(var j = 0; j < dataArr.length; j++) {
							if(dataArr[j].glucategory == 1) { //   如果类型是1的话就加入新的数组
								gluBlood.unshift(dataArr[j].glu)
							}
						}
						
						//  类别二   餐后两小时
						var twoHour = [];
						for(var k = 0; k < dataArr.length; k++) {
							if(dataArr[k].glucategory == 2) { //   如果类型是1的话就加入新的数组
								twoHour.unshift(dataArr[k].glu)
							}
						}
						//   先算出空腹血糖的长度  再加入餐后两小时的 数组
						var gulLenght = gluBlood.length;
						var hourLenght = new Array(gulLenght);
						for(var m=0;m<hourLenght.length;m++){
							twoHour.unshift(hourLenght[m])
						}
						
						//  类别三   随机血糖
						var randomBlood = [];
						for(var o=0;o<dataArr.length;o++){
							if(dataArr[o].glucategory == 3){
								randomBlood.unshift(dataArr[o].glu)
							}
						}
						//  先算出餐后两小时的长度  再加入随机血糖的数组
						var newData = twoHour.length
						var randomArr = new Array(newData)
						for(var n=0;n<randomArr.length;n++){
							randomBlood.unshift(randomArr[n])
						}
						
						//  echarts X 轴数据
						this.myCharts.setOption({
							xAxis: [
								{data: xData} //将异步请求获取到的数据进行装载
							],
							series: [
								{ data: gluBlood },
								{ data: twoHour },
								{ data: randomBlood }
							]
						})
				})
				.catch((err)=>{
					console.log(err)
				})
			},
			//  七天前的数据
			getData(){
				this.myCharts.setOption(option);
				let startTime = this.getDay(-7);  //  七天前的日期
				this.tabData.startTime = Date.parse(new Date(startTime)); //  开始 时间戳
				let endTime = this.getDay(1)
				this.tabData.endTime = Date.parse(new Date(endTime)); //   结束时间戳
				this.tabData.customer_id = localStorage.getItem('customer_id')

				let param = new URLSearchParams();
				param.append('customer_id', this.tabData.customer_id);
				param.append('startTime', this.tabData.startTime);
				param.append('endTime', this.tabData.endTime);
				this.$http({
						method: 'post',
						url: Api.GLUmonitorlist,
						data: param
					})
					.then(({data})=>{
						console.log(data)
						//  判断是否显示图片
						if(data.data.length > 0) {
							this.showImg = false;
						} else {
							this.showImg = true;
						}
						var dataArr = data.data;
						//  将X轴日期便利出来 加入新的数组
						var xData = [];
						var newXdata = []; // 餐后两小时 日期
						var randomXdata = []; //  随机血糖 日期
						for(var i = 0; i < dataArr.length; i++) {
							if(dataArr[i].glucategory == 1){
								xData.unshift(dataArr[i].testTime)  // .substr(5, 5)
							} else if(dataArr[i].glucategory == 2) {
								newXdata.unshift(dataArr[i].testTime);
							} else if(dataArr[i].glucategory == 3){
								randomXdata.unshift(dataArr[i].testTime);
							}
						}
						
						newXdata.map(e=>{ //  将餐后两小时的日期 加入到 xData 中
							xData.push(e)
						})
						randomXdata.map(e=>{ //  将随机血糖的日期 加入到 xData 中
							xData.push(e)
						})
						//  类别一   空腹血糖
						var gluBlood = [];
						for(var j = 0; j < dataArr.length; j++) {
							if(dataArr[j].glucategory == 1) { //   如果类型是1的话就加入新的数组
								gluBlood.unshift(dataArr[j].glu)
							} 
						}
						//  类别二   餐后两小时
						var twoHour = [];
						for(var k = 0; k < dataArr.length; k++) {
							if(dataArr[k].glucategory == 2) { //   如果类型是1的话就加入新的数组
								twoHour.unshift(dataArr[k].glu)
							}
						}
						//   先算出空腹血糖的长度  再加入餐后两小时的 数组
						var gulLenght = gluBlood.length;
						var hourLenght = new Array(gulLenght);
						for(var m=0;m<hourLenght.length;m++){
							twoHour.unshift(hourLenght[m])
						}
//						
//						//  类别三   随机血糖
						var randomBlood = [];
						for(var o=0;o<dataArr.length;o++){
							if(dataArr[o].glucategory == 3){
								randomBlood.unshift(dataArr[o].glu)
							}
						}
						//  先算出餐后两小时的长度  再加入随机血糖的数组
						var newData = twoHour.length
						var randomArr = new Array(newData)
						for(var n=0;n<randomArr.length;n++){
							randomBlood.unshift(randomArr[n])
						}
//						
//						//  echarts X 轴数据
						this.myCharts.setOption({
							xAxis: [
								{data: xData} //将异步请求获取到的数据进行装载
							],
							series: [
								{ data: gluBlood },
								{ data: twoHour },
								{ data: randomBlood }
							]
						})
					
					})
					.catch((err)=>{
						console.log(err)
					})
			},
			//  调用日期  开始时间
			startTime() {
				var _this = this;
				this.$vux.datetime.show({
					cancelText: '取消',
					confirmText: '确定',
					format: 'YYYY-MM-DD',
					value: '',
					startDate:"1900-01-01",
					endDate: currentDate,  //  禁用未来时间
					//  时间显示的时候 清空 startTime 和 endTime，  因为刚开始在 getData() 函数startTime和endTime 是七天前和今天 的 日期
					onShow () {
						_this.tabData.startTime = '';   
						_this.tabData.endTime = '';
						
						_this.time2 = '结束时间';
					},
					//  确定
					onConfirm(val) {
						_this.time1 = val;
						_this.tabData.startTime = Date.parse(val);	//  日期转时间戳  开始时间
					}
				})
				
			},
			//  结束时间
			endTime() {
				var _this = this;
				this.$vux.datetime.show({
					cancelText: '取消',
					confirmText: '确定',
					format: 'YYYY-MM-DD',
					value: '',
					startDate:"1900-01-01",
					endDate: currentDate,  //  禁用未来时间
					//  确定
					onConfirm(val) {
						_this.time2 = val;
						_this.tabData.endTime = Date.parse(val);	//  日期转时间戳  结束时间
						_this.queryFun(); //  点击确定的时候调用查询函数
					}
				})
			},
			//  获取时间戳函数
			getDay(day){
				var today = new Date();
				var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
				today.setTime(targetday_milliseconds); //注意，这行是关键代码
				var tYear = today.getFullYear();
				var tMonth = today.getMonth();
				var tDate = today.getDate();
				tMonth = this.doHandleMonth(tMonth + 1);
				tDate = this.doHandleMonth(tDate);
				return tYear + "-" + tMonth + "-" + tDate;
			},
			//  获取时间戳函数
			doHandleMonth(month) {
				var m = month;
				if(month.toString().length == 1) {
					m = "0" + month;
				}
				return m;
			},
			// echarts
			myChart() {
				let myChart = echarts.init(document.getElementById('myChart1')); //  组件引用写法
				this.myCharts = myChart;
				//用于使chart自适应高度和宽度  
				window.onresize = function() {
					//重置容器高宽  
					myChart.resize();
				};
				option = {
					backgroundColor: '#f8f8f8',
					textStyle: {
						color: '#000',
						fontSize: 8
					},
					tooltip: {
						trigger: 'axis',
						formatter: function(data) {
							console.log()
							return `${data[0].axisValue}<br>${data[0].seriesName}: ${data[0].value}`
						}
					},
					legend: {
				        data:['空腹血糖(mmol)','餐后两小时(mmol)','随机血糖(mmol)'],
				        textStyle: {
				            fontSize: 12
				        },
				        icon: 'rect',
				        itemWidth: 16,
				        itemHeight: 6,
				        itemGap: 10,
				        padding: [30, 2, 15, 2]
				    },
				    dataZoom: [
	                    { //Y轴固定,让内容滚动
	                        type: 'slider',
	                        show: false,
	                        xAxisIndex: [0],
	                        start: 1,
	                        end: 80,//设置X轴刻度之间的间隔(根据数据量来调整)
	                        zoomLock: false, //锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
	                    },
	                    {
	                        type: 'inside',
	                        xAxisIndex: [0],
	                        start: 1,
	                        end: 80,
	                        zoomLock: false, //锁定区域禁止缩放
	                    },
	 
	                ],
	                grid: {
	                    left: '4%', //设置Y轴name距离左边容器的位置,类似于margin-left
	                    right: '4%',
	                    bottom: '2%',
	                    containLabel: true
	                },
					toolbox: {
						show: true,
						feature: {
							mark: {
								show: true
							},
							dataView: {
								show: true,
								readOnly: true,
								optionToContent:function(opt){
									let axisData = opt.xAxis[0].data; //坐标数据
								    let series = opt.series; //折线图数据
								    let tdHeads = '<td  style="padding: 5px 16px; background:#f8f8f9">时间</td>'; //表头
								    let tdBodys = ''; //数据
								    series.forEach(function (item) {
								        //组装表头
								        tdHeads += `<td style="font-size: 12px;background:#f8f8f9">${item.name}</td>`;
								    });
								    let table = `<table border="0" style="width:100%;font-size:12px;text-align:center"><tbody id='tbody'><tr>${tdHeads} </tr>`;
								    for (let i = 0, l = axisData.length; i < l; i++) {
								        for (let j = 0; j < series.length; j++) {
								            //组装表数据
								           
								            if(series[j].name == '空腹血糖(mmol)') {
								            	if(series[j].data[i] !== undefined) {
								            		if(series[j].data[i] >= 6.1 || series[j].data[i] <= 3.9) {
								            			tdBodys += `<td  style='color: red'>${ series[j].data[i]}</td>`;
								            		} else {
								            			tdBodys += `<td>${ series[j].data[i]}</td>`;
								            		}
								            	} else {
								            		tdBodys += `<td></td>`;
								            	}
								            }
								            if(series[j].name == '餐后两小时(mmol)') {
								            	if(series[j].data[i] !== undefined) {
								            		if(series[j].data[i] >= 7.9) {
								            			tdBodys += `<td  style='color: red'>${ series[j].data[i]}</td>`;
								            		} else {
								            			tdBodys += `<td>${ series[j].data[i]}</td>`;
								            		}
								            	} else {
								            		tdBodys += `<td></td>`;
								            	}
								            }
								            if(series[j].name === '随机血糖(mmol)') {
								            	if(series[j].data[i] !== undefined) {
								            		if(series[j].data[i] >= 11.1) {
								            			tdBodys += `<td  style='color: red'>${ series[j].data[i]}</td>`;
								            		} else {
								            			tdBodys += `<td>${ series[j].data[i]}</td>`;
								            		}
								            	} else {
								            		tdBodys += `<td></td>`;
								            	}
								            }
//								            if(series[j].data[i] !== undefined){
//								            	tdBodys += `<td>${ series[j].data[i]}</td>`;
//								            } else {
//								            	tdBodys += `<td></td>`;
//								            }
								            
								        }
								        table += `<tr class='tr'><td style="padding: 6px 18px">${axisData[i]}</td>${tdBodys}</tr>`;
								        tdBodys = '';
								    }
								    table += '</tbody></table>';
								    return table;
								}
							},
							magicType: {
								show: true,
								type: ['line']
							},
							restore: {
								show: true
							}
						}
					},
					calculable: true,
					xAxis: [{
						type: 'category',
						boundaryGap: true,
						name: '', // 日期
						nameGap: 6,
						axisLabel: {
							interval: 'auto',
							formatter : function(params){
                   			var newParamsName = "";// 最终拼接成的字符串
                            var paramsNameNumber = params.length;// 实际标签的个数 10 
                            var provideNumber = 5;// 每行能显示的字的个数   5
                           
                            var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整   3
                            /**
                             * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                             */
                            // 条件等同于rowNumber>1
                            if (paramsNameNumber > provideNumber) {
                                /** 循环每一行,p表示行 */
                                for (var p = 0; p < rowNumber; p++) {
                                    var tempStr = "";// 表示每一次截取的字符串
                                    var start = p * provideNumber;// 开始截取的位置
                                    var end = start + provideNumber;// 结束截取的位置
                                    // 此处特殊处理最后一行的索引值
                                    if (p == rowNumber - 1) {
                                        // 最后一次不换行
                                        tempStr = params.substring(start, paramsNameNumber);
                                    } else {
                                        // 每一次拼接字符串并换行
                                        tempStr = params.substring(start, end) + "\n";
                                    }
                                    if(tempStr.indexOf("-") == 4) {
                                    	tempStr = tempStr.replace("-","")
                                    }
                                    newParamsName += tempStr;// 最终拼成的字符串
                                }

                            } else {
                                // 将旧标签的值赋给新标签
                                newParamsName = params;
                            }	
                            	
                            	return newParamsName
                			}
						},
						//						nameRotate: 35,
						nameTextStyle: {
							color: '#3aaffc',
							fontSize: 11
						},
						axisTick: {
							show: false
						},
						axisLine: {
							show: false,
							lineStyle: {
								color: '#3aaffc'
							}
						}
//						data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
					}],
					yAxis: [{
						type: 'value',
						splitNumber: 3,
						boundaryGap: [0, 0.1], //   不要顶天立地-,
						axisTick: {
							show: false
						},
						axisLine: {
							show: false
						}
					}],
					series: [{
							name: '空腹血糖(mmol)',
							type: 'line',
							//data: ['10'],
							symbol: 'circle',
//							color: '#0099ff',
//							symbolSize: 5
							//  拐点圆形的大小
							symbolSize: function(value,param){
								if(value >= 6.1 || value <= 3.9){
									return 7
								} else{
									return 5
								}
								
							},
							lineStyle: {
								color: '#0099ff'
							},
							itemStyle: {
								color: {
									type: 'linear',
									color: '#0099ff'
								},
								normal: {
									// 拐点颜色设置
									color:function(param){
										if (param.value >= 6.1 || param.value <= 3.9) {
								        	return 'red';
								    	}else {
											 return '#0099ff';
										}
									}
								}
							}
						},
						{
							name: '餐后两小时(mmol)',
							type: 'line',
							//data:  twoHour,
							symbol: 'circle',
//							color: '#ffaa00',
//							symbolSize: 5
							symbolSize: function(value,param){
								if(value >= 7.9){
									return 7
								} else{
									return 5
								}
							},
							lineStyle: {
								color: '#ffaa00'
							},
							itemStyle: {
								color: {
									type: 'linear',
									color: '#ffaa00'
								},
								normal: {
									// 拐点颜色设置
									color:function(param){
										if (param.value >= 7.9) {
											
								        	return 'red';
								    	}else {
											 return '#ffaa00';
										}
									}
								}
							}
						},
						{
							name: '随机血糖(mmol)',
							type: 'line',
							//data:  ['30'],
							symbol: 'circle',
//							color: '#039d56',
//							symbolSize: 5
							symbolSize: function(value,param){
								if(value >= 11.1){
									return 7
								} else{
									return 5
								}
								
							},
							lineStyle: {
								color: '#039d56'
							},
							itemStyle: {
								color: {
									type: 'linear',
									color: '#039d56'
								},
								normal: {
									// 拐点颜色设置
									color:function(param){
										if (param.value >= 11.1) {
								        	return 'red';
								    	}else {
											 return '#039d56';
										}
									}
								}
							}
						}

					]
				};
				
				//  调用 七天前的函数  刚开始就调用这个函数
				this.getData()
			}
		},
		mounted() {
			this.myChart()  //  初始化 echarts 
		}
	}
</script>

<style lang="less">
	@import '../tab.less';
</style>